<template>
	<view class="page">
		<u-search class="u-kms-search" v-model="kmsSearch" height="70" placeholder="搜课程、搜帖子" bg-color="#fff" @search="bindSearch" @custom="bindSearch"></u-search>
		<view>
			<view v-for="(menu, index) in showMenus" :key="index" class="menu-card">
				<view class="bbs-card">
					<view class="bbs-index-title">
						<view class="bbs-icon-title">
							<u-image width="40rpx" height="40rpx" :src="menu.icon"></u-image>
							<view style="padding-left: 10px">
								{{ menu.title }}
							</view>
						</view>
						<view @click.stop="toShowNew" style="color: #2979ff">
							{{ menu.type == 'kms' ? '快速提问' : '' }}
						</view>
					</view>
					<view>
						<u-grid :col="5" :border="showBorder" hover-class="true">
							<u-grid-item v-for="(item, $index) in menu.children" :index="$index" :key="$index">
								<view class="grid-item-box" @click.stop="kmsToPath($index, item)">
									<u-image :src="item.icon" shape="circle" width="40px" height="40px"></u-image>
									<text class="text">{{ item.title }}</text>
									<u-badge v-if="item.title === '我的消息'" :count="notSeeMesge" :absolute="absolute" :is-center="absolute" :offset="bellBage" class="badge-bell"></u-badge>
								</view>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
			</view>
		</view>
		<u-tabbar :list="vuex_tabbars" class="my-tabbars"></u-tabbar>
	</view>
</template>

<script>
import { kmsSysRouters } from '@/router';
import { unreadMessageCount } from '@/api/kms/bbs.js';
export default {
	data() {
		return {
			showBorder: false,
			kmsSearch: '',
			absolute: true,
			bellBage: [15, 10],
			notSeeMesge: 0,
		};
	},
	computed: {
		showMenus() {
			const menus = kmsSysRouters.length ? kmsSysRouters : [];
			let allAuth = this.vuex_user.allAuth;
			if (allAuth) {
				for (let i = 0; i < menus.length; i++) {
					menus[i].hidden = allAuth[menus[i].type] ? false : true;
					if (menus[i].children && menus[i].children.length && allAuth[menus[i].type]) {
						for (let j = 0; j < menus[i].children.length; j++) {
							menus[i].children[j].hidden = this.showMenuFun(menus, i, j) ? false : true;
						}
					}
				}
			}
			return menus;
		},
	},
	onLoad() {},
	onShow() {
		this.notSeeMesg();
	},
	watch: {},
	methods: {
		showMenuFun(menus, i, j) {
			let auto = null;
			if (menus[i].children[j].authType && menus[i].children[j].authType.length) {
				auto = menus[i].children[j].authType.find((item) => this.vuex_user.allAuth[menus[i].type][item]);
			}
			return auto;
		},
		bindSearch() {
			uni.navigateTo({
				url: '/pages/kmsManagement/kmsFunList/kmsSearch/searchList?content=' + this.kmsSearch,
			});
		},
		kmsToPath(index, item) {
			let url = item.url;
			if (url) {
				uni.navigateTo({
					url: url,
				});
			}
		},
		toShowNew() {
			let params = {
				crmType: 'bbs',
			};
			uni.navigateTo({
				url: '/pages/kmsManagement/kmsFunList/bbs/publishBbs?params=' + encodeURIComponent(JSON.stringify(params)),
			});
		},
		notSeeMesg() {
			let self = this;
			let params = {};
			unreadMessageCount(params).then((res) => {
				self.notSeeMesge = res.data.count;
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.menu-card /deep/ {
	.u-card__head {
		padding: 20rpx !important;
	}

	.u-card__body {
		padding: 0 10rpx !important;
	}

	.u-grid-item-box {
		padding: 10rpx !important;
	}
}

.grid-item-box {
	flex: 1;
	/* position: relative;
	*/
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 5px 0;
}

.text {
	margin-top: 10rpx;
	font-size: 12px;
	// display: flex;
	// justify-content: center;
	// align-items: center;
	// text-align: center;
	// font-size: 22rpx;
	// width: 120rpx;
	// height: 120rpx;
	// border-radius: 5px;
	// background-color: #0faeff;
	// color: #ffffff;
}

.create-menu {
	position: relative;
	background-color: #ffffff;
	width: 100%;
	min-height: 200px;
	border-radius: 5px 5px 0 0;
	padding: 0 10px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.my-popup /deep/ .u-close--top-right {
	top: 20rpx !important;
}

.menu-title {
	text-align: center;
	height: 80rpx;
	font-size: 35rpx;
	line-height: 80rpx;
	border-bottom: 1px solid #efeff4;
}

.menu-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 10px 0;
}

.menu-item {
	width: 120rpx;
	height: 120rpx;
	font-size: 22rpx;
	line-height: 120rpx;
	text-align: center;
	background-color: orange;
	color: #ffffff;
	border-radius: 5px;
	margin-right: 10px;
}

.u-kms-search {
	margin: 20rpx 30rpx !important;
}

.u-kms-search /deep/ .uni-input {
	border: 1rpx solid #999999;
	display: inline-block;
	line-height: 2em;
	height: 2em;
	min-height: 2em;
	border-radius: 10rpx;
	width: 75%;
	margin-left: 12px;
	// padding-left: 10px;
}
.u-kms-search /deep/ .uni-input-placeholder {
	padding-left: 10px;
}
.u-kms-search /deep/ .uni-input-input {
	padding-left: 10px;
}
.u-kms-text {
	display: inline-block;
	margin: auto 10px;
	border: 1px solid #999999;
	border-radius: 12px;
	padding: 3px 12px;
	color: #ffffff;
	background-color: #3296fa;
}
.badge-bell {
	top: 15px !important;
	right: 10px !important;
}
.bbs-card {
	border: 1px solid #f7f8fa;
	border-radius: 7px;
	margin: 14px;
	background: #fff;
}
.bbs-index-title {
	display: flex;
	padding: 8px 8px;
	font-size: 14px;
	justify-content: space-between;
	border-bottom: 1px solid #f7f8fa;
}
.bbs-icon-title {
	display: flex;
}
</style>
